<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/sitem.css">
    <title>学校室内大屏</title>
</head>
<body>
   <div class="content">
        <div class="header">
            <div class="hearlog">
                <img style="width: 32px;height: 16.48px;" src="./images/indoor/logo.png" class="logoimg"/>
                <h1 style="font-size: 18px;
color: #304166;">校园空气环境监控中心</h1>
            </div>
            <div class="tiems" id="time" style="font-weight: 400;">
                <span id="time-content" style="font-size: 14px;
color: #304166;"></span>
            </div>
        </div>
        <div style="padding: 0px 38px 0px 38px;">
            <div class="kqtabless" style="padding: 16px 31px;width: auto;">
            <div class="viewrtn">
                <button class="fhbrtn" onclick="javascript:history.go(-1)" style="margin: 0 0 20px 0;">
                    <img src="./images/fh.png" class="fhimg" style="width: 20px;height:20px;"/>
                    <span style="font-size: 14px;color: #304166;">返回</span>
                </button>
            </div>
            <div style="height: calc(100vh - 250px);overflow: auto;" id="mytables">
                <table id="mytable">
                    <tr>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">采集时间</th>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">PM2.5 (mg/m³)</th>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">PM10 (mg/m³)</th>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">甲醛 (mg/m³)</th>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">挥发性有机物 (mg/m³)</th>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">二氧化碳 (mg/m³)</th>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">温度 (°C)</th>
                        <th style="font-size: 14px;color: rgba(48,65,102,0.5);">湿度 (%)</th>
                    </tr>
                    <tbody id="tbody">
                        <tr style="background:none">
                            <td class="label">09:57:41</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">755</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.4</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">39.9</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">09:58:41</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">755</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.4</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">39.9</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">09:59:42</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">755</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.4</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">39.9</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:00:42</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">757</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.4</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">39.8</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:01:42</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">762</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.4</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">39.8</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:02:42</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">764</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.3</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">40</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:03:43</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">764</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.3</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">40.1</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:04:43</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">764</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.3</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">40</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:05:43</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">766</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.3</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">40</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:06:44</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">770</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.3</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">40</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:07:44</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">769</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.3</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">40</span></div>
                            </td>
                        </tr>
                        <tr style="background:none">
                            <td class="label">10:08:44</td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.01</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.03</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg1">0.02</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label leg2">769</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">24.3</span></div>
                            </td>
                            <td>
                                <div class="spanbox"><span class="label">40</span></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        </div>
   </div>
   <script id="myTemplate" type="text/x-jquery-tmpl">
    <tr style="background:none">
        <td class="label">${ftime}</td> 
        <td><div class="spanbox"><span class="label ${getTagByPm25(pm25)}">${pm25}</span></div></td>
        <td><div class="spanbox"><span class="label ${getTagByPm10(pm10)}">${pm10}</span></div></td>
        <td><div class="spanbox"><span class="label ${getTagByHcho(hcho)}">${hcho}</span></div></td>
        <td><div class="spanbox"><span class="label ${getTagByTvoc(tvoc)}">${tvoc}</span></div></td>
        <td><div class="spanbox"><span class="label ${getTagByCo2(co2)}">${co2}</span></div></td>
        <td><div class="spanbox"><span class="label">${t}</span></div></td>
        <td><div class="spanbox"><span class="label">${h}</span></div></td>
    </tr>
</script>
</body>
<script src="./js/jquery-2.2.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.ex.min.js"></script>
<script src="./js/api.min.js"></script>
<script src="./js/api.js"></script>
<script src="./js/jquery.tmpl.min.js"></script>
<script src="./js/jquery.nicescroll.min.js"></script>
<script src="./js/point.js"></script>

</html>